
import React,{Fragment} from 'react';
import {DepthEchartsShow} from './depthEchartsShow';
import {useSelector} from 'react-redux';   // 代替connect

export const DepthDemo = (props) => {
  //console.log("深度道")
  const {leftData} = props;   // 道id、道索引
  const curvesCount = useSelector(state => state.curvesCount);


  // const daosDataList = useSelector(state => state.daosDataList);   // 从state中取 数据
  //const [count, setCount] = useState(0); // 该文件的各个道中的最多曲线个数
  // function getCurveWrapperHeight(){   // 获取 该文件的各个道中的最多曲线个数
  //   var count1 = 0;
  //   daosDataList.map((item1) => {
  //     var daoCount = 0;
  //     if(item1.curves){
  //       item1.curves.map((item2) => {
  //         daoCount++;
  //       })
  //     }
  //     if(count1 < daoCount){
  //       count1 = daoCount
  //     }
  //   })
  //   setCount(count1);
  //   //console.log("深度道最大的曲线数",count1,count);
  // }
  // useEffect(() => {
  //   getCurveWrapperHeight();  //实时获取 该文件的各个道中的最多曲线个数
  // })

  return (
    <Fragment>
      <div 
        className="dao-curve-title-wrapper"
        style={{
          minHeight: 34, 
          height: curvesCount*34,
          left: leftData
        }}
      ></div>  
      <div className="curve-show-wrapper-depth">
        <DepthEchartsShow />
      </div>
      <div 
        className="dao-curve-title-wrapper"
        style={{
          minHeight: 34, 
          height: curvesCount*34,
          left: leftData
        }}
      ></div>  
    </Fragment>  
  )
}

// class DepthDemo extends Component{
 
//     render(){
//       return (
//         <Fragment>
//           <div 
//             className="dao-curve-title-wrapper"
//             // style={{minHeight: 30, height: this.count*30}}
//           ></div>  
//           <div className="curve-show-wrapper ">
//             <DepthEchartsShow />
//           </div>
//         </Fragment>       
//       )
//     }
// }

// export default DepthDemo;